import React, { useContext, useEffect, useState } from 'react'
import { Breadcrumb, Avatar, Dropdown, Space, Divider, message } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import { useLocation, useNavigate } from 'react-router-dom'
import { MenuContext } from '../MenuContext/MenuContext'
import './HeaderPart.css'

const items = [
    {
        key: '1',
        label: (
            <div>
                Reset Password
            </div>
        )
    },
    {
        key: '2',
        label: (
            <div>
                Logout
            </div>
        )
    },
]

const HeaderPart = () => {
    const { selectedItem } = useContext(MenuContext)
    const location = useLocation()
    const navigate = useNavigate()
    const [routes, setRoutes] = useState([])
    const [messageApi, contextHolder] = message.useMessage()

    useEffect(() => {
        let newRoutes = [
            {
                path: '/',
                breadcrumbName: 'Home',
            },
        ]


        if (location.pathname === '/contact') {
            newRoutes.push({
                path: '/contact',
                breadcrumbName: 'Contact',
            })
        } else if (location.pathname === '/homePage') {
            newRoutes.push({
                path: '/homePage',
                breadcrumbName: 'Home Page',
            })
        } else if (location.pathname === '/about') {
            newRoutes.push({
                path: '/about',
                breadcrumbName: 'About Page',
            })
        } else if (location.pathname === '/cabout') {
            newRoutes.push({
                path: '/cabout',
                breadcrumbName: 'CAbout Page',
            })
        }
        else if (selectedItem) {
            newRoutes.push({
                path: selectedItem.path,
                breadcrumbName: selectedItem.label,
            })
        }

        setRoutes(newRoutes)
    }, [location.pathname, selectedItem])

    const handleBreadcrumbClick = (path) => {
        if (path !== location.pathname) {
            navigate(path)
        }
    }

    const handleDropdownClick = (e) => {
        if (e.key === '1') {
            messageApi.info('Reset password successfully!')
        } else if (e.key === '2') {
            // 处理 Logout 逻辑
            messageApi.info('Logout!')
        }
    }

    return (
        <>
            <div className='header-part'>
                <Breadcrumb>
                    {routes.map((route, index) => (
                        <Breadcrumb.Item
                            key={route.path}
                            onClick={index === routes.length - 1 ? null : () => handleBreadcrumbClick(route.path)}
                        >
                            {route.breadcrumbName}
                        </Breadcrumb.Item>
                    ))}
                </Breadcrumb>
                {contextHolder}
                <div className='user-info'>
                    <Avatar className='avatar' src='https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' alt='avatar' />
                    <div className='username'>
                        <Dropdown
                            menu={{
                                items,
                                onClick: handleDropdownClick,
                            }}
                            dropdownRender={(menu) => (
                                <div>
                                    {React.cloneElement(menu)}
                                    <Divider
                                        style={{
                                            margin: 0,
                                        }}
                                    />
                                    <Space
                                        style={{
                                            padding: 8,
                                        }}
                                    >
                                    </Space>
                                </div>
                            )}
                        >
                            <div>
                                <Space>
                                    zhangsan
                                    <DownOutlined />
                                </Space>
                            </div>
                        </Dropdown>
                    </div>
                </div>
            </div>
        </>
    )
}

export default HeaderPart